<template>
	<cmDialog v-model="dialogState" modal-title="新复审人员" model-width="700px">
		<div style="padding: 20px 40px">
			<el-form ref="reviewPersonFormRef" :model="reviewPersonForm" :rules="drafterRules" label-width="100px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="姓名" prop="reviewName">
							<el-input v-model="reviewPersonForm.reviewName" placeholder="请输入" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="工作单位" prop="reviewCompany">
							<el-input v-model="reviewPersonForm.reviewCompany" placeholder="请输入" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="职称职务" prop="reviewTitle">
							<el-input v-model="reviewPersonForm.reviewTitle" placeholder="请输入" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="联系电话" prop="reviewTel">
							<el-input v-model="reviewPersonForm.reviewTel" placeholder="请输入" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="从事专业" prop="reviewProfession">
							<el-input v-model="reviewPersonForm.reviewProfession" placeholder="请输入" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div class="dialog-foot">
				<el-button @click="handleAddCancel">取消</el-button>
				<el-button type="primary" @click="handleAddFormSubmit(reviewPersonFormRef)">确定</el-button>
			</div>
		</div>
	</cmDialog>
</template>
<script lang="ts" setup>
import cmDialog from '@/components/cm-dialog/index.vue'
import { ReviewPerson } from '@/interface/review'
import type { FormInstance, FormRules } from 'element-plus'
import { computed, reactive, ref, watch } from 'vue'

const props = defineProps({
	modelValue: Boolean,
	reviewPersonInfo: {
		type: Object as () => ReviewPerson,
		default: () => ({})
	}
})

const emit = defineEmits(['update:modelValue', 'submit-success', 'close-dialog'])

const dialogState = computed({
	get: () => props.modelValue,
	set: val => emit('update:modelValue', val)
})

const reviewPersonFormRef = ref<FormInstance>()

const reviewPersonForm = reactive<ReviewPerson>({
	reviewName: '',
	reviewCompany: '',
	reviewProfession: '',
	reviewTitle: '',
	reviewTel: '',
	index: -1
})
const phoneOrLandlineValidator = (rule, value, callback) => {
	const phoneRegex = /^1[3-9]\d{9}$/
	const landlineRegex = /^(0\d{2,3})-?\d{7,8}$/

	if (!phoneRegex.test(value) && !landlineRegex.test(value)) {
		callback(new Error('请输入有效的手机号或座机号码'))
	} else {
		callback()
	}
}
const drafterRules = reactive<FormRules>({
	reviewName: [{ required: true, message: '请输入', trigger: 'blur' }],
	reviewCompany: [{ required: true, message: '请输入', trigger: 'blur' }],
	reviewProfession: [{ required: true, message: '请输入', trigger: 'blur' }],
	reviewTitle: [{ required: true, message: '请输入', trigger: 'blur' }],
	reviewTel: [
		{ required: true, message: '请输入', trigger: 'blur' },
		{ validator: phoneOrLandlineValidator, trigger: 'blur' }
	]
})

watch(
	() => props.reviewPersonInfo,
	newVal => {
		const index = newVal.index ?? -1
		if (newVal && index > -1) {
			Object.assign(reviewPersonForm, newVal)
		}
	},
	{ immediate: true }
)

const handleAddCancel = () => {
	restForm()
	emit('close-dialog')
	emit('update:modelValue', false)
}

const restForm = () => {
	Object.assign(reviewPersonForm, { id: '' })
	Object.assign(reviewPersonForm, { reviewName: '' })
	Object.assign(reviewPersonForm, { reviewCompany: '' })
	Object.assign(reviewPersonForm, { reviewProfession: '' })
	Object.assign(reviewPersonForm, { reviewTitle: '' })
	Object.assign(reviewPersonForm, { reviewTel: '' })
	Object.assign(reviewPersonForm, { index: -1 })
}

const handleAddFormSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) {
		return
	}
	await formEl.validate((valid, fields) => {
		if (valid) {
			const submittedData = { ...reviewPersonForm }
			emit('submit-success', submittedData)
			restForm()
		} else {
			console.log('error submit!', fields)
		}
	})
}
</script>
<style lang="scss" scoped>
.dialog-foot {
	display: flex;
	justify-content: center;
	padding-top: 20px;
	margin-bottom: 10px;
}
</style>
